<template>
  <view>
    <status-bar></status-bar>
    <view class="flex flex-col gap-10">
      <back-page></back-page>
      <text class="text-2xl font-bold">登录</text>
      <login-components v-model="mobile" :msg="mobile" :disabled="true">
        <template #button>
          <van-icon name="link-o" size="25px" />
        </template>
        <template #other>
          <van-field
            :value="code"
            placeholder="请输入验证码"
            @input="handleInput"
            maxlength="6"
          />
        </template>
      </login-components>
    </view>
    <btn-click
      class="fixed bottom-0 right-0 left-0"
      :disabled="show"
      @handleClick="getCodeHandle"
    >
      <view class="flex flex-row items-center justify-center">
        <text>重新发送</text>
        <!--        倒计时组件 -->
        <count-down v-model="show"></count-down>
      </view>
    </btn-click>
  </view>
</template>

<script setup lang="ts">
import LoginComponents from '@/layout/components/LoginComponents.vue'
import StatusBar from '@/layout/PageItemComponents/statusBar.vue'
import { ref, onMounted } from 'vue'
import BackPage from '@/layout/components/BackPage.vue'
import { onLoad } from '@dcloudio/uni-app'
import BtnClick from '@/layout/components/BtnClick.vue'
import CountDown from '@/layout/components/CountDown.vue'
import { getCode } from '@/api/getCode'
import { useUserStore } from '@/store/user'
import { useModal } from '@/common/utils/showModel'

const { showModal } = useModal()
const userStore = useUserStore()
const mobile = ref<number | string>('')
onLoad((query) => {
  if (query && query.mobile) {
    mobile.value = query.mobile
  }
})
const code = ref<number | string>('')
const show = ref(true)
const msg = ref('')
// 获取验证码处理函数
const getCodeHandle = () => {
  getCode(mobile.value as string).then((res) => {
    msg.value = res.msg
    showModal('验证码', msg.value)
  })
}
onMounted(() => {
  getCodeHandle()
})
//处理输入框输入验证码后实现自动跳转到登录页。
const handleInput = (e: { detail: string }) => {
  if (e.detail.length !== 6) {
    return
  }
  code.value = e.detail
  userStore.loginCode(mobile.value as string, code.value as string).then(() => {
    uni.switchTab({ url: '/pages/my/my' })
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 3500
    })
  })
}
</script>

<style scoped lang="scss"></style>
